<template>
  <div class="subjects-container">
    <el-card class="box-card">
      <el-row :gutter="24">
        <el-col :span="10" class="col-left"
          ><el-form label-width="80px">
            <el-form-item label="学科名称">
              <el-input
                v-model="params.subjectName"
              ></el-input> </el-form-item></el-form
          ><el-button @click="params.subjectName = ''">清除</el-button
          ><el-button type="primary" @click="getList">搜索</el-button></el-col
        >
        <el-col :span="3" :offset="11"
          ><el-button
            type="success"
            class="fr"
            icon="el-icon-edit"
            @click="AdddialogVisible = true"
            >新增学科</el-button
          ></el-col
        >
      </el-row>
      <!-- 提示信息 -->
      <el-alert
        :title="`数据一共${total}条`"
        show-icon
        type="info"
        :closable="false"
      >
      </el-alert>
      <!-- table表格 -->
      <el-table :data="CourseList" style="width: 100%" align="right">
        <el-table-column fixed type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="subjectName" label="学科名称" width="130">
        </el-table-column>
        <el-table-column prop="username" label="创建者" width="130">
        </el-table-column>
        <el-table-column label="创建日期" width="160">
          <template slot-scope="scope">
            {{ scope.row.addDate | dateFormat }}</template
          >
        </el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示" width="130">
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录" width="130">
        </el-table-column>
        <el-table-column prop="tags" label="标签" width="130">
        </el-table-column>
        <el-table-column prop="totals" label="题目数量" width="130">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="240">
          <template slot-scope="scope">
            <el-button
              @click="godirectorys(scope.row)"
              type="text"
              size="small"
            >
              学科分类
            </el-button>
            <el-button
              @click="
                $router.push(
                  `tags?id=${scope.row.id}&name=${encodeURIComponent(
                    scope.row.subjectName
                  )}`
                )
              "
              type="text"
              size="small"
            >
              学科标签
            </el-button>
            <el-button
              @click="ShowChangeSubject(scope.row)"
              type="text"
              size="small"
            >
              修改
            </el-button>
            <el-button
              @click="deleteSubject(scope.row.id)"
              type="text"
              size="small"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="params.pagesize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </el-card>
    <!-- 新增学科弹出框 -->
    <el-dialog :visible.sync="AdddialogVisible" title="新增学科">
      <subjects-add
        @add-success="addsuccess"
        @close-addSubject="AdddialogVisible = false"
      ></subjects-add>
    </el-dialog>

    <!-- 修改学科弹出框 -->
    <el-dialog :visible.sync="ChangedialogVisible" title="修改学科">
      <el-form label-width="100px" class="demo-ruleForm"
        ><el-form-item label="修改学科">
          <el-input v-model="QueryInfo.subjectName"></el-input>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch v-model="QueryInfo.isFrontDisplay"></el-switch>
          <!-- <template slot-scope="scope">{{
            scope.row.isFrontDisplay === 1 ? "是" : "否"
          }}</template> -->
        </el-form-item>
        <el-form-item
          ><el-button @click="ChangedialogVisible = false">取消</el-button>
          <el-button type="primary" @click="ChangeSubject()">确认</el-button>
        </el-form-item></el-form
      >
    </el-dialog>
  </div>
</template>

<script>
// import { simple } from "@/api/hmmm/subjects.js";
import { list, update, detail, remove } from "@/api/hmmm/subjects.js";

import SubjectsAdd from "../components/subjects-add";
export default {
  name: "Subjects",
  components: { SubjectsAdd },
  data() {
    return {
      inputSubject: "",
      params: {
        page: 1, //当前页
        pagesize: 10, //每页的数据
        subjectName: null,
      },
      id: "",
      total: 0,
      CourseList: [], //学科列表
      AdddialogVisible: false, //新增学科弹出框
      ChangedialogVisible: false, //修改学科弹出框
      QueryInfo: {
        isFrontDisplay: null,
        id: "",
        subjectName: "",
      },

      // ruleForm: {
      //   name: "",
      // },
      // rules: {
      //   name: [
      //     { required: true, message: "请输入学科名称", trigger: "blur" },
      //     { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
      //   ],
      // },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取学科列表
    async getList() {
      try {
        const { data } = await list(this.params);
        this.CourseList = data.items;
        this.total = data.counts;
        console.log(data);
      } catch (error) {
        this.$message.error("获取失败！");
      }
    },
    addsuccess() {
      this.AdddialogVisible = false;
      this.getList();
    },
    // CloseAddSubject() {
    //   this.AdddialogVisible = false;
    // },
    // 修改学科弹出框
    async ShowChangeSubject(row) {
      console.log(row);
      this.QueryInfo.id = row.id;
      this.QueryInfo.subjectName = row.subjectName;
      this.QueryInfo.isFrontDisplay = row.isFrontDisplay === 1 ? true : false;
      this.ChangedialogVisible = true;
      this.getList();
      // this.ChangedialogVisible = true;
      // const { data } = await detail(row.id);
    },
    // 修改学科发送请求
    async ChangeSubject() {
      const { data } = await update(this.QueryInfo);
      this.getList();
      this.ChangedialogVisible = false;
    },

    // 删除学科
    deleteSubject(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const { data } = await remove({ id });
          this.getList();
          if (data.success === false) {
            this.$message({
              type: "error",
              message: "删除失败!",
            });
          }
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 分页处理每页条数
    handleSizeChange(val) {
      console.log(val);
      this.params.pagesize = val;
      this.getList();
    },
    // 分页处理当前页
    handleCurrentChange(val) {
      this.params.page = val;
      this.getList();
    },

    godirectorys(row) {
      this.$router.push(
        `directorys?id=${row.id}&name=${encodeURIComponent(row.subjectName)}`
      );
    },
  },
};
</script>

<style scoped lang='less'>
.subjects-container {
  .col-left {
    display: flex;
    flex: 1;
    .el-button--medium {
      width: 70px;
      height: 38px;
      margin-left: 10px;
    }
  }
  .el-input--medium .el-input__inner {
    width: 235px;
  }
  .fr {
    float: right;
  }
  /deep/ .el-dialog {
    width: 500px;
  }
  .el-pagination {
    text-align: right;
    /deep/ .el-pagination__total {
      display: none;
    }
  }
}
</style>
